<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉框选择图片</title>
		<script type="text/javascript">
			function showPic(str)
			{
				var xmlhttp;
				if(str=="")
				{
					document.getElementById("showarea").innerHTML="";
					return;
				}
				if (window.XMLHttpRequest) {
					xmlhttp=new XMLHttpRequest();
				} else{
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				xmlhttp.onreadystatechange=function(){
					if (xmlhttp.readyState==4 && xmlhttp.status==200) {
						document.getElementById("showarea").innerHTML=xmlhttp.responseText;
						//alert(xmlhttp.responseText);
					}
				}
				
				xmlhttp.open("GET","showPic.php?p="+str,true);
				xmlhttp.send();
			}
		</script>
	</head>
	<body>
		<form style="margin-top: 15px;">
			<label>请选择:
				<select name="piclist" onchange="showPic(this.value)">
					<option value="xqx">小清新</option>
					<option value="hbsc">火爆身材</option>
					<option value="tyj">童颜巨</option>
					<option value="nc">你猜</option>
				</select>
			</label>
		</form>
		<br/>
		<div id="showarea">请选择图片</div>
	</body>
</html>


<!--做一个下拉框，当选择不同的值是，实现对应的图片加载。
做一个选项卡，实现数据内容是Ajax加载的。
参考区县下拉选择示例，使用Ajax实现三级商品分类信息的级联加载-->